<template>
  <div class="merchant-list">
    <ul class="list">
      <li
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        @click="$router.push(`/seller/view/${item.id}`)"
      >
        <div class="image">
          <img v-lazy="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </div>
        <div class="desc">
          <p class="name">{{ item.name }}</p>
          <p class="mobile"><span>联系电话:</span> {{ item.mobile | mobileText }}</p>
          <p class="address"><span>地址:</span> {{ item.address }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MerchantList',
  props: ['list'],
  filters: {
    mobileText(v) {
      if (v.length === 11) {
        return v ? v.substring(0, 3) + '****' + v.substring(7) : ''
      }
      return ''
    }
  }
}
</script>

<style scoped lang="stylus">
.merchant-list
  .list
    .list-item
      margin 0 10px 10px 10px
      background white
      padding 10px
      border-radius 10px
      display flex
      justify-items center
      .image
        width 100px
      .desc
        flex 1
        text-align start
        padding-left 10px
        .name
          line-height 35px
          font-weight 700
          font-size 16px
        .mobile, .address
          line-height 20px
          span
            font-weight 700
</style>
